<style scoped>
    .title {
        width: 100%;
        height:60px;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #fff;
        padding: 0 24px;
    }
    .title-maozi {
        width: 40px;
        height: 27px;
        margin-right:18px;
    }

    .contain {
        width: 100%;
        height: calc(100% - 60px);
    }
    .menu {
        width: 210px;
        background: #212B3F;
        box-shadow: 2px 2px 2px 2px #273756;
    }
    .content {
        width: 0;
        flex: 1 0 0;
        height: 100%;
        overflow: auto;
        background: #EFF1F4;
    }
    .router-view {
        width: 100%;
        height: 100%;
    }
    .menu-icon {
        vertical-align: bottom;
    }

</style>
<template>
    <div>
        <div class="title" :style="{background: 'url(assets/image/title-bg.png) no-repeat'}">
            <!--<img class="title-maozi" src="assets/image/maozi.png">-->
            <div class="flex-1">IOT物联管理系统</div>
            <img @click="changeMenu({name: 'system_center'})" class="img-32 img-circle m-r-10 cursor-p" src="assets/image/avatar.png">
            <div @click="changeMenu({name: 'system_center'})" class="text-16 m-r-15 cursor-p">{{UserInfo.user_name}}</div>
            <img @click="logout" class="img-24 m-r-10 cursor-p" src="assets/image/logout.png">
            <div @click="logout" class="text-14 cursor-p">退出</div>
        </div>

        <div class="contain flex">
            <div class="menu">
                <Menu :active-name="activeName" :open-names="openNames" width="210px">
                    <template v-for="(item,i) in menuList">

                        <MenuItem v-if="!item.children" :key="item.name" :name="item.name"
                                  @click.native="changeMenu(item)"
                        >
                            <img class="menu-icon img-24" :src="'assets/image/' + item.icon">
                            {{item.title}}
                        </MenuItem>

                        <Submenu v-if="item.children" :key="item.name" :name="item.name">
                            <template slot="title">
                                <img class="menu-icon img-24" :src="'assets/image/' + item.icon">
                                {{item.title}}
                            </template>
                            <MenuItem v-for="(child,iChild) in item.children"
                                      :key="child.title"
                                      :name="child.name"
                                      @click.native="changeMenu(child)"
                            >{{child.title}}</MenuItem>

                        </Submenu>

                    </template>

                </Menu>
            </div>
            <div class="content">
                <router-view class="router-view"></router-view>
            </div>

        </div>

    </div>
</template>

<script>

    export default {
        components: {

        },
        data() {
            return {
                menuList: [
                    {
                        title: '物联管理',
                        icon: 'icon-zhifa.png',
                        name: 'iotManage',
                        children: [
                            {
                                title: '门禁管理',
                                name: 'iotManage_doorManage',
                            },
                            {
                                title: '物联控制',
                                name: 'iotManage_iot',
                            },
                        ],
                    },
                    {
                        title: '系统设置',
                        icon: 'icon-xitong.png',
                        name: 'system',
                        children: [
                            {
                                title: '机构管理',
                                name: 'system_company',
                            },
                            {
                                title: '账号管理',
                                name: 'system_account',
                            },
                        ],
                    },
                ],
                activeName: '',
                openNames: [
                    'iotManage',
                    'system',
                ],
            }
        },
        created() {
            console.log('账号信息', JSON.parse(JSON.stringify(this.UserInfo)))

            let name = this.$route.name;
            this.activeName = name;
            this.openNames = [name.split('_')[0]]

            if(name === 'iotManage') {
                this.activeName = 'iotManage_doorManage';
            } else if(name === 'anliku_anliku') {
                this.activeName = 'anliku';
            } else if(name === 'audit_audit') {
                this.activeName = 'audit';
            }



            // console.log('activeName', name)
        },

        methods: {
            changeMenu(item) {
                console.log('item', item)
                if(this.$route.name.indexOf(item.name) === 0) return

                this.$router.push({
                    name: item.name
                })
                let name = item.name;
                this.activeName = name;
                this.openNames = [name.split('_')[0]]
                console.log(this.openNames);

                if(name === 'iotManage') {
                    this.activeName = 'iotManage_doorManage';
                } else if(name === 'anliku_anliku') {
                    this.activeName = 'anliku';
                } else if(name === 'audit_audit') {
                    this.activeName = 'audit';
                }
            },
            logout() {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认退出登录吗？</p>',
                    onOk: () => {

                        let postData = {

                        };
                        //
                        // this.util.post('/management/logout', postData).then(res => {
                        //     if(res.status == 200) {
                        //         localStorage.clear();
                        //         this.$router.push({
                        //             name: 'login'
                        //         });
                        //         setTimeout(() => {
                        //             location.reload();
                        //         }, 100)
                        //     } else {
                        //         this.$Message.warning(res.msg)
                        //     }
                        // })
                        localStorage.clear();
                        this.$router.push({
                            name: 'login'
                        });
                        setTimeout(() => {
                            location.reload();
                        }, 100)

                    },
                });
            },
        },
    }
</script>
